<template>
	<view>
		<!--   -->
		<view class="position-absolute top-0" :class="getClass">
			<!-- 状态栏 -->
			<view :style="'height:'+statusBarHeight+'px'"></view>
			<!-- 导航 -->
			<view class="w-100  flex align-center justify-between" style="height: 88rpx;">
				<!-- 左边 -->
				<view class="flex flex-1 align-center">
					<!-- 返回按钮 -->
					<free-icon-button v-if="showBack" @click="back" :icon="'\ue615'"></free-icon-button>
				</view>
				
				<!-- 标题 -->
				<view class="flex-1 flex justify-center align-center">
					<slot>
						<text v-if="title" class="font-md text-primary">{{getTitle}}</text>
					</slot>
				</view>
				<!-- 右边 -->
				<view class="flex align-center justify-end flex-1" v-if="showRight" style="margin-right: 26rpx;">
					<slot name="right"></slot>
				</view>
			</view>
		</view>
		
		<!-- 占位 -->
		<view class="border border-bottom-0" :style="fixedStyle"></view>
		
	
	</view>
</template>

<script>
	// 自定义导航栏
	import freeIconButton from './free-icon-button.vue';
	export default {
		props: {
			// 是否存在回退按钮
			showBack:{
				type:Boolean,
				default: false
			},
			// 标题
			title: {
				type: [Boolean,String],
				default: false
			},
			fixed: {
				type: Boolean,
				default: true
			},
			// 未读数
			noreadnum:{
				type: Number,
				default: 0
			},
			// 背景颜色
			bgColor:{
				type: String,
				default: "bg-white"
			},
			// 是否显示右侧功能图标
			showRight:{
				type: Boolean,
				default: true
			},
			// 返回事件
			backEvent:{
				type: Boolean,
				default: true
			},
			
			// 左边的icon图标
			icon:{
				type:String,
				default:''
			},
			// 返回按钮粗细默认是粗的
			backIconType:{
				type:Boolean,
				default:true
			}
		},
		components:{
			freeIconButton
		},
		data(){
			return {
				statusBarHeight:0,
				navBarHeight:0
			}
		},
		computed:{
			fixedStyle(){
				return `height:${this.navBarHeight}px`
			},
			getTitle(){
				let noreadnum = this.noreadnum > 0 ? '('+this.noreadnum+')' : ''
				return this.title + noreadnum
			},
			// 动态获取菜单高度
			getMenusHeights(){
				let H = 100
				return this.menus.length * H
			},
			// 动态获取菜单样式
			getMenusStyle(){
				return `height:${this.getMenusHeights}rpx`
			},
			getClass(){
				// let fixed = this.fixed?'fixed-top':''
				return `${this.bgColor}`
			}
			
		},
		mounted() {
			// 不同机型的状态栏高度不一,获取系统状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			this.navBarHeight = this.statusBarHeight + uni.upx2px(88)
		},
		methods:{
			search(){
				uni.navigateTo({
					url:'/pages/common/search/search'
				})
			},
			// 回退
			back(){
				if(this.backEvent){
					uni.navigateBack({
						delta: 1
					});
				} else {
					this.$emit('back')
				}
			},
			// // 关闭事件
			// close(){
			// 	if(this.closeEvent){
			// 		uni.navigateBack({
			// 			delta: 1
			// 		});
			// 	} else {
			// 		this.$emit('close')
			// 	}
			// }
		}
	}
</script>

<style>
</style>
